<template>
  <div
    :class="shadow ? 'tabs-container has-shadow' : 'tabs-container'"
    :style="{ 'align-items': align, display: styleLess }"
  >
    <div class="tabs-title" :style="title ? 'margin-right:10px' : ''">
      <!-- <span style="color: red">{{ required ? '* ' : '' }}</span> -->
      {{ title }}
    </div>
    <div class="item-container">
      <div
        v-for="(item, index) in list"
        :key="index"
        :class="index === actived ? 'tab-item is-actived' : 'tab-item'"
        :style="{ width: width + 'px' }"
        @click="tabClick(item, index, $event)"
      >
        {{ item[label] }}
      </div>
      <div class="wu" v-show="list.length == 0">暂无数据</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'XTabs',
  props: {
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default() {
        return []
      },
      required: true
    },
    label: {
      type: String,
      required: true
    },
    activedIndex: {
      type: String,
      default: ''
    },
    shadow: {
      type: Boolean,
      default: true
    },
    required: {
      type: Boolean,
      default: false
    },
    souying: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number
    },
    styleLess: {
      type: String,
      default: 'flex'
    },
    align: {
      type: String
    }
  },
  data() {
    return {
      actived: this.activedIndex //this.activedIndex
    }
  },
  methods: {
    tabClick(item, index, $event = '') {
      // console.log(item, index, $event)
      console.log($event)
      this.actived = index
      this.$emit('tab-click', { item, index, $event })
    },
    qingkong() {
      this.actived = ''
    },
    ling() {
      this.actived = 0
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.tabClick(newVal[0], 0)
      }
    },
    style: {
      handler(newVal) {
        console.log(newVal)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs-container {
  display: flex;

  height: 100%;
  min-height: 30px;
  width: 100%;
  background-color: #ffffff;
  height: 65%;

  // tabs标题
  .tabs-title {
    // width: 100px;
    width: fit-content;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    margin: 10px 0px;
    color: #606266;
    white-space: nowrap;
    font-weight: bold;
  }

  // tab项
  .item-container {
    .tab-item {
      text-align: center;
      display: inline-block;
      height: 30px;
      color: #606266;
      background-color: #ffffff;
      font-size: 14px;
      line-height: 30px;
      border-radius: 8px;
      border: 1px solid #d8d8da !important;
      margin: 10px 10px 0px 10px;
      padding: 0px 14px !important;
      transition: 0.1s linear !important;
      cursor: pointer;

      &:last-child {
        margin-bottom: 10px;
      }
    }

    .is-actived {
      color: #ffffff;
      background-color: #44b1f4;
      border: 2px solid #ffffff !important;
    }
  }
}

.has-shadow {
  min-height: 50px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.wu {
  height: 30px;
  line-height: 30px;
  margin: 10px 10px 10px 20px;
  color: #606266;
}

</style>
